import React from 'react';
import { Button,Tag } from 'antd-mobile';
import styles from './index.less';
import right from '@/assets/icon/ic_right.svg';
import right_big from '@/assets/icon/ic_topic_correct.svg';
import ic_error from '@/assets/icon/ic_error.svg';
import ic_error_big from '@/assets/icon/ic_topic_error.svg';
import { upsetArray } from '@/utils';
import { getQuestionStatics } from '@/services/edu'
import {Rate} from 'antd'
import { index } from './utils';
type answer = {
  label: string;
  value: string | number;
}
export interface ShowProps {
  isCheckbox?: boolean; //是否为多选， 默认false
  answer: number[] | string[];  //正确答案
  value: number[] | string[]; //选中的答案
  question: string; //问题
  options: answer[];  //答案列表
  parse: string | React.ReactNode; //问题解析
  current: number;  //当前第几题
  total: number;  //一共多少题
  correctNumber?: number; //正确的数量
  failNumber?: number;  //错误的数量
  isRight: boolean; //该题是否正确
  onNext: () => void; //点击下一题
  onPre: () => void;  //点击上一题
  upset?: boolean;  //是否打乱
  topicInfo?:any;
  id:string|number;
  type: 1 | 2 | 3;  //2模拟 1练习  3考试
}
export default class Show extends React.Component<ShowProps, any> {

  static formatOptions = (data: any[], label: string = 'name', value: string = 'id') => {//格式化options数据
    return data.map(item => ({
      label: item[label],
      value: item[value],
    }))
  }
  static index = index
  constructor(props) {
    super(props);
    this.state = {
      value: undefined,
      statics:{}
    }
  }
  componentDidMount =async()=>{
    const res = await getQuestionStatics({questionId:this.props.id})
    if(res?.code===1){
      this.setState({statics:res?.response})
    }
  }
  renderAnswer = (item, index) => {
    const { value=[], answer } = this.props;
    console.log('answer====answer',value,answer)
    return <div
      key={`answer-${index}`}
    >
      <span>
        {
          value.indexOf(item.value as never) !== -1 ? answer.indexOf(item.value as never) !== -1 ? <img src={right_big} /> : <img src={ic_error_big} /> : <span>{Show.index[index]}</span>
        }
      </span>
      <span>
        {item.label}
      </span>
    </div>
  }
  render() {
    const { question,topicInfo, current, total, isRight, answer, onPre, onNext, isCheckbox, correctNumber, failNumber, options, parse, upset,type } = this.props;
    const _options = upset ? upsetArray(options) : options;
    const {
      statics
    } = this.state
    return <div className={`${styles.container} ${styles['topic-container']}`}>
      <div className={styles.title}>
        {(type===1&&topicInfo.tagValue)?<div className={styles.tag}>{
            topicInfo.tagValue.split(',').map((item,i)=>item?<Tag key={i}>{item}</Tag>:'')
          }</div>:<span>
          {
            correctNumber !== undefined ? <span className={styles.success}>
              <img src={right} />
              {correctNumber}
            </span> : ''
          }
          {
            failNumber !== undefined ? <span className={styles.fail}>
              <img src={ic_error} />
              {failNumber}
            </span> : ''
          }
        </span>}
        <span className={styles.current}>
          {current}/{total}
        </span>
      </div>

      <div className={styles.question}>
       
        <div className={styles.sign}>{isCheckbox ? '多选' : '单选'}</div>
        <div className={styles.contant}>{question}</div>
      </div>
      
      <div className={styles.answers}>
        {
          _options.map(this.renderAnswer)
        }
        </div>
        <div className={styles.splitter} />
        <div className={styles.rightAnswers}>
          <span>答案&nbsp;&nbsp;&nbsp;{_options.map((item, index) => answer.indexOf(item.value as never) === -1 ? undefined : index).filter(item => item !== undefined).map(index => Show.index[index]).join(' ')}</span>
          {
            isRight ? <span className='text-success'>回答正确</span> : <span className={styles['text-error']}>回答错误</span>
          }
        </div>
      

      

      <div className={styles.statistics}>共被作答<span>{statics.donePerCount||'-'}</span>次，正确率为<span>{statics.correctPercent||'-'}%</span></div>
      <div className={styles.parse}>
        <div>
          <i />解析  <Rate allowHalf value={topicInfo.difficult}/>
        </div>
        {topicInfo.analyze&&<div dangerouslySetInnerHTML={{__html:topicInfo.analyze}}>
        </div>}
      </div>
      {topicInfo.examPoint&&<div style={{paddingTop:0}} className={styles.parse}>
        <div>
          <i />考点 
        </div>
        <div dangerouslySetInnerHTML={{__html:topicInfo.examPoint}}>
        </div>
      </div>}

      <div className={`${styles.footer} fixed_bottom`}>
        <span>
          {
            current > 1 ? <Button onClick={onPre} className={`${styles.button} lb-button`}  type='primary' size='small'>上一题</Button> : ''
          }
        </span>
        <Button onClick={onNext} className={`${styles.button} lb-button`}  type='primary' size='small'>{current === total ? '完成':'下一题'}</Button>
        
      </div>
    </div>
  }
}